/* The branding (theme) editor.
   UI-1 phase B (6 Oct 2026): moved out of the shared design-system.css, which the Admin portal
   also loads, because only the end-user portal uses it. App.razor links it straight after
   design-system.css, so it keeps its place in the cascade. */

/* =========================================================================
   Eight28 D5 Theme Editor layout
   -------------------------------------------------------------------------
   Consumed by Pages/App/Settings/ThemeEditor.razor.
   ========================================================================= */

.theme-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.theme-editor__grid {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 0;
}

@media (max-width: 920px) {
    .theme-editor__grid { grid-template-columns: 1fr; }
}

.theme-editor__panel {
    background: var(--color-background-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
}

.theme-editor__section {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

.theme-editor__section h3 {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.theme-editor__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.theme-editor__field:last-child { margin-bottom: 0; }

.theme-editor__field > label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-editor__val {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.theme-editor__color-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-editor__swatch {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    flex: 0 0 28px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.theme-editor__swatch input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%; height: 100%;
}

.theme-editor__color-input .input {
    height: 28px;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

.theme-editor__presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.theme-editor__preset {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--motion-fast);
}

.theme-editor__preset:hover { transform: scale(1.08); }

.theme-editor__preset.active {
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 2px var(--color-background-surface) inset;
}

.theme-editor__fonts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-editor__font {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--motion-fast);
    background: var(--color-background-surface);
    text-align: left;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.theme-editor__font:hover {
    border-color: var(--color-border-strong);
    background: var(--color-background-sunken);
}

.theme-editor__font.active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.contrast-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contrast-pill--aaa  { background: var(--color-success-bg); color: var(--color-success); }
.contrast-pill--aa   { background: var(--color-info-bg);    color: var(--color-info); }
.contrast-pill--fail { background: var(--color-error-bg);   color: var(--color-error); }

/* The loading skeleton's blocks (UI-1 I1b): the logo slot and the preview, so the page keeps its shape. */
.theme-editor__skeleton-logo { height: 96px; }
.theme-editor__skeleton-preview { height: 420px; border-radius: var(--radius-lg); }

.theme-editor__preview {
    background: var(--color-background-page);
    padding: var(--space-5);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.theme-editor__preview-toolbar {
    display: flex;
    align-items: center;
    padding-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ── Logo upload zone ───────────────────────────────────────────────────── */

.theme-editor__logo-zone {
    position: relative;
    display: flex;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    height: 84px;
    overflow: hidden;
    transition: border-color var(--motion-fast), background var(--motion-fast);
}

.theme-editor__logo-zone:has(.theme-editor__logo-trigger:hover) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.theme-editor__logo-zone--error {
    border-color: var(--color-error);
}

.theme-editor__logo-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: var(--space-2);
}

.theme-editor__logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
    pointer-events: none;
}

.theme-editor__logo-clear {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-error-bg);
    color: var(--color-error);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    transition: background var(--motion-fast), color var(--motion-fast);
    z-index: 1;
}

.theme-editor__logo-clear:hover {
    background: var(--color-error);
    color: var(--neutral-0);
}

.theme-editor__logo-error {
    font-size: var(--font-size-sm);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* ── Mini app-shell preview ─────────────────────────────────────────────── */

/* The preview sidebar's user, at the mini-shell's scale (UI-1 I2: was inline). */
/* The saved logo, shown above the upload zone (UI-1 I4: moved out of a <style> block in the editor). */
.theme-editor__logo-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.theme-editor__logo-current img {
    max-height: 160px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    padding: 12px;
    background: var(--neutral-0);
}

.theme-editor__logo-current-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.theme-editor__logo-current-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.theme-editor__preview-user-name { font-weight: 600; font-size: 9px; }
.theme-editor__preview-user-email { font-size: 8px; color: var(--color-text-muted); }

.theme-editor__preview-shell {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    max-height: 520px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--black) 7%, transparent);
}

/* Mini sidebar */
.theme-editor__preview-sidebar {
    width: 136px;
    flex: 0 0 136px;
    background: var(--color-background-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.theme-editor__preview-brand {
    height: 44px;
    flex: 0 0 44px;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 11px;
    overflow: hidden;
}

.theme-editor__preview-brand-mark {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 10px;
    flex: 0 0 auto;
}

.theme-editor__preview-brand-logo {
    max-height: 24px;
    max-width: 76px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.theme-editor__preview-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--color-text-primary);
}

.theme-editor__preview-nav {
    flex: 1;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.theme-editor__preview-nav-item {
    padding: 5px 10px;
    font-size: 10px;
    border-radius: var(--radius-sm);
    margin: 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-editor__preview-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex: 0 0 auto;
    opacity: 0.35;
}

.theme-editor__preview-nav-item--active {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-text);
    font-weight: 600;
}

.theme-editor__preview-nav-item--active .theme-editor__preview-nav-dot {
    background: var(--color-primary);
    opacity: 1;
}

.theme-editor__preview-sidebar-user {
    border-top: 1px solid var(--color-border-subtle);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
}

.theme-editor__preview-sidebar-user-info {
    overflow: hidden;
}

/* Mini main area */
.theme-editor__preview-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-background-page);
}

.theme-editor__preview-topbar {
    height: 44px;
    flex: 0 0 44px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background-surface);
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.theme-editor__preview-topbar-title {
    font-family: var(--font-family-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.theme-editor__preview-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-editor__preview-topbar-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 auto;
}

.theme-editor__preview-page {
    padding: 14px;
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theme-editor__preview-greeting {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text-primary);
}

.theme-editor__preview-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.theme-editor__preview-kpi {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 10px;
}

.theme-editor__preview-kpi-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.theme-editor__preview-kpi-value {
    font-family: var(--font-family-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}

.theme-editor__preview-kpi-delta {
    font-size: 8px;
    color: var(--color-success);
    font-weight: 500;
    margin-top: 2px;
}

.theme-editor__preview-cta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.theme-editor__preview-feed {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background-surface);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.theme-editor__preview-feed-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.theme-editor__preview-feed-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-editor__preview-feed-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.theme-editor__preview-feed-dot--primary { background: var(--color-primary); }
.theme-editor__preview-feed-dot--success { background: var(--color-success); }
.theme-editor__preview-feed-dot--warning { background: var(--color-warning); }